<template>
  <div
    :class="'gas-line-map-wrap ' + wrapId"
    :key="wrapId"
    :id="wrapId"
    :ref="wrapId"
    :style="{ height: height, width: width }"
  >
    <div :id="id" :ref="id" :class="'chart ' + className"></div>
    <div class="right-menu-wrap" ref="rightMenu">
      <slot name="right-menu"></slot>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import { merge, isEmpty, each } from 'lodash'
// 图标跟随视窗变化而变化
import chartResize from '@/mixins/chartResize'
import config from '@/config'
require('echarts/extension/bmap/bmap')

const testPoint = [
  {
    'selected': false,
    'dotType': '1',
    'longitude': 104.06281355592012,
    'latitude': 30.691336960148348,
    'posi': [
      462,
      213
    ]
  },
  {
    'selected': false,
    'longitude': 104.08013288615248,
    'latitude': 30.691399069901767,
    'posi': [
      554,
      382
    ]
  },
  {
    'selected': false,
    'dotType': '1',
    'longitude': 104.09824272523365,
    'latitude': 30.68394561131099,
    'posi': [
      684,
      516
    ]
  },
  {
    'selected': false,
    'dotType': '1',
    'longitude': 104.09658984309529,
    'latitude': 30.67587037536364,
    'posi': [
      729,
      351
    ]
  },
  {
    'selected': false,
    'dotType': '2',
    'longitude': 104.09076882339063,
    'latitude': 30.666303444228756,
    'posi': [
      804,
      578
    ]
  },
  {
    'selected': false,
    'dotType': '1',
    'longitude': 104.08408543039639,
    'latitude': 30.6702173044404,
    'posi': [
      929,
      491
    ]
  },
  {
    'selected': false,
    'dotType': '1',
    'longitude': 104.09357153658176,
    'latitude': 30.65990424850901,
    'posi': [
      863,
      654
    ]
  }
]

const testLines = [
  {
    'hasEdit': false,
    'linePoint': [
      [
        462,
        213
      ],
      [
        554,
        382
      ]
    ],
    'mapPosi': [
      [
        104.06281355592012,
        30.691336960148348
      ],
      [
        104.08013288615248,
        30.691399069901767
      ]
    ]
  },
  {
    'hasEdit': false,
    'linePoint': [
      [
        554,
        382
      ],
      [
        684,
        516
      ]
    ],
    'mapPosi': [
      [
        104.08013288615248,
        30.691399069901767
      ],
      [
        104.09824272523365,
        30.68394561131099
      ]
    ]
  },
  {
    'hasEdit': false,
    'linePoint': [
      [
        684,
        516
      ],
      [
        804,
        578
      ]
    ],
    'mapPosi': [
      [
        104.09824272523365,
        30.68394561131099
      ],
      [
        104.09076882339063,
        30.666303444228756
      ]
    ]
  },
  {
    'hasEdit': false,
    'linePoint': [
      [
        804,
        578
      ],
      [
        863,
        654
      ]
    ],
    'mapPosi': [
      [
        104.09076882339063,
        30.666303444228756
      ],
      [
        104.09357153658176,
        30.65990424850901
      ]
    ]
  },
  {
    'hasEdit': false,
    'linePoint': [
      [
        554,
        382
      ],
      [
        729,
        351
      ]
    ],
    'mapPosi': [
      [
        104.08013288615248,
        30.691399069901767
      ],
      [
        104.09658984309529,
        30.67587037536364
      ]
    ]
  },
  {
    'hasEdit': false,
    'linePoint': [
      [
        929,
        491
      ],
      [
        804,
        578
      ]
    ],
    'mapPosi': [
      [
        104.08408543039639,
        30.6702173044404
      ],
      [
        104.09076882339063,
        30.666303444228756
      ]
    ]
  }
]

const testCenter = [
  {
    'selected': false,
    'dotType': '1',
    'longitude': 104.06281355592012,
    'latitude': 30.691336960148348,
    'posi': [
      462,
      213
    ]
  },
  {
    'selected': false,
    'dotType': '1',
    'longitude': 104.09357153658176,
    'latitude': 30.65990424850901,
    'posi': [
      863,
      654
    ]
  }
]

export default {
  name: 'gas-line-map',
  mixins: [chartResize],
  props: {
    id: {
      type: String,
      default: 'gas-line-map'
    },
    className: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    chartData: {
      type: Object,
      default: null
    },
    loadingStyle: {
      type: Object,
      default: () => ({})
    },
    mapCenter: {
      type: Array
    },
    points: {
      type: Array
    },
    lines: {
      type: Array
    },
    centerPoint: {
      type: Array
    }
  },
  computed: {
    wrapId() {
      return this.id + '-chart'
    }
  },
  data() {
    return {
      chart: null,
      map: null,
      polylines: []
    }
  },
  watch: {
    chartData: {
      handler() {
        this.chart.hideLoading()
        this.chartRest()
      },
      deep: true
    },
    mapCenter() {
      this.chart.setOption({
        bmap: {
          center: this.mapCenter
        }
      })
    },
    points: {
      handler() {
        this.addMapOverlay(this.points)
      },
      deep: true
    },
    lines: {
      handler() {
        each(this.lines, item => {
          this.drawLine(item)
        })
      },
      deep: true
    },
    centerPoint: {
      handler() {
        this.setCenterByPoint()
      },
      deep: true
    }
  },
  beforeDestroy() {
    this.removePolylineEvent()
    if (!this.chart) {
      return
    }
    this.chart.clear()
    this.chart.dispose()
    this.chart = null
    this.map = null
  },
  mounted() {
    // 初始化echarts
    this.chart = echarts.init(document.getElementById(this.id), config.echartsthemeName)
    // 图表渲染前数据就已存在
    if (!isEmpty(this.chartData)) {
      this.initChart()
    }
    this.$nextTick(() => {
      if (!isEmpty(this.points)) {
        this.addMapOverlay(this.points)
      }
      if (!isEmpty(this.lines)) {
        each(this.lines, item => {
          this.drawLine(item)
        })
      }
      if (!isEmpty(this.centerPoint)) {
        this.setCenterByPoint()
      }
      console.log(this.points)
      console.log(this.lines)
      console.log(this.centerPoint)
      // TODO:下面模拟数据
      this.addMapOverlay(testPoint)
      each(testLines, item => {
        this.drawLine(item)
      })
      this.setCenterByPoint()
    })
  },
  methods: {
    chartRest() {
      this.chart.clear()
      this.chart.hideLoading()
      this.$nextTick(() => {
        this.initChart()
      })
    },
    addMapOverlay(list) {
      each(list, item => {
        const { longitude, latitude, dotType } = item
        if (dotType) {
          // eslint-disable-next-line no-undef
          const icon = new BMap.Icon(require(`@/assets/mapicons/${dotType}.png`), new BMap.Size(24, 16))
          // eslint-disable-next-line no-undef
          const mark = new BMap.Marker(new BMap.Point(longitude, latitude), {
            icon: icon
          })
          this.map.addOverlay(mark)
        } else {
          // eslint-disable-next-line no-undef
          const label = new BMap.Label('')
          this.map.addOverlay(label)
        }
      })
    },
    drawLine(item) {
      this.removePolylineEvent()
      const list = []
      const { mapPosi } = item
      each(mapPosi, po => {
        // eslint-disable-next-line no-undef
        list.push(new BMap.Point(...po))
      })
      // eslint-disable-next-line no-undef
      const polyline = new BMap.Polyline(list, {
        strokeColor: '#1c213e',
        strokeWeight: 2
      })
      this.polylines.push(polyline)
      this.map.addOverlay(polyline)
      this.$nextTick(() => {
        this.polylineEvent(polyline)
      })
    },
    polylineEvent(overlay) {
      overlay.addEventListener('click', this.handlePolylineClick)
    },
    removePolylineEvent() {
      each(this.polylines, overlay => {
        overlay.removeEventListener('click', this.handlePolylineClick)
      })
      this.polylines = []
    },
    handlePolylineClick(e) {
      // TODO:线点击
      console.log(e)
    },
    /**
     * desc: 显示图表加载loading
     * param {type}
     * return:
     */
    showLoading() {
      this.chart.showLoading(merge({}, config.echartsLoadingStyle, this.loadingStyle))
    },
    /**
     * desc: 初始化图表
     * param {type}
     * return: void
     */
    initChart() {
      this.chart.setOption(this.chartData, true)
      // this.map = this.chart
      //   .getModel()
      //   .getComponent('bmap')
      //   .getBMap()
      // eslint-disable-next-line no-undef
      this.map = new BMap.Map(this.id)
      // eslint-disable-next-line no-undef
      const point = new BMap.Point(...this.$store.getters.mapCenter)
      this.map.centerAndZoom(point, 14)
      this.map.enableScrollWheelZoom(true)
    },
    setCenterByPoint() {
      // TODO:模拟点
      // if (this.centerPoint.length === 2) {
      if (testCenter.length === 2) {
        // const [first, two] = this.centerPoint
        const [first, two] = testCenter
        const lng = first.longitude + (two.longitude - first.longitude) / 2
        const lat = first.latitude + (two.latitude - first.latitude) / 2
        // eslint-disable-next-line no-undef
        this.chart.setOption({
          bmap: {
            center: [lng, lat]
          }
        })
      }
    }
  }
}
</script>
<style lang="less">
.gas-line-map-wrap {
  position: relative;
  .chart {
    width: 100%;
    height: 100%;
  }
  .tool-wrap {
    position: absolute;
    left: 0;
    top: 0;
  }
}
</style>
